<template>
  <div class="background">
    <div class="hd mt10">
      <img src="../../assets/yygh.png" alt="">
    </div>
    <search-bar :menu="menu" :showsearch="false" :activeitem="activeitem"></search-bar>
    <div class="content re">
      <position>
        <router-link to="/cloud">云诊室</router-link>
        &gt;
        <router-link to="/cloud/appoint_history">我的预约</router-link>
        &gt;
        <span class="last">取消预约</span>
      </position>

      <div class="mt20">
        <div class="my_appointment">
          <div class="cancel-order">
            <ul class="middle fl">
              <li class="first">
                <span class="t3">就诊人：</span>
                <span>{{orderToCancel.regName}}</span>
                &nbsp;&nbsp;&nbsp;
                <span class="t3">就诊序号：</span>
                <span class="f20 t6">{{orderToCancel.regVisitingNumber}}</span>
              </li>
              <li>
                <span class="t3">就诊科室：</span>&nbsp;&nbsp;
                <span>{{orderToCancel.regDeptName}}</span>
              </li>
              <li>
                <span class="t3">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：</span>&nbsp;&nbsp;
                <span class="name">{{orderToCancel.orgFullName}}</span>
              </li>
              <li>
                <span class="t3">就诊时间：</span>&nbsp;&nbsp;
                <span>{{orderToCancel.workDate}} 下午 {{orderToCancel.startTime}}-{{orderToCancel.endTime}}</span>
              </li>
              <li>
                <span class="t3">挂号费：</span>
                <span class="f20 t6">{{orderToCancel.charge}}</span>
                <span>元</span>
              </li>

            </ul>
            <ul class="middle fr">
              <li class="first">
                取消原因：
              </li>
              <li v-for="(v, i) in CANCEL_ORDER_RESIONS" :key="i">
                <el-radio v-model="radioResion" :label="(i+1)">{{v}}</el-radio>
              </li>
            </ul>

          </div>

        </div>
        <div class="center">
          <a class="common-main-button" href="javascript:;" @click="cancelOrder">确认取消</a>
        </div>
      </div>

      <!-- dialog  -->
      <el-dialog :visible.sync="dialog.show" custom-class=" dialog-common">
        <div class="dialog-title" slot="title">
          提示
        </div>
        <div style="line-height:2;">{{dialog.content}}</div>
        <div slot="footer" class="dialog-footer center">
          <a class="common-main-button" href="javascript:;" @click="dialog.fn">确定</a>
        </div>
      </el-dialog>

      <div class="warn">
        <ul>
          <li>
            <img src="../../assets/warn.png" alt="">
            <span>温馨提示</span>
          </li>
          <li>
            取消预约成功后，费用将在7个工作日内到账；如遇退款失败，可拨打（025）86617141-20130沟通
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    commonAjax,
    PLATFORM_PREFIX,
    PAY_STATUS,
    CANCEL_ORDER_RESIONS,
    PRODUCT_ID,
    CLOUD_MENU
  } from '../../api/api'
  import Loading from '../../components/Loading'
  import Position from '../../components/Position'
  import LeftTime from '../../components/LeftTime'
  import SearchBar from '../../components/SearchBar'

  export default {
    components: {Position, Loading, LeftTime, SearchBar},
    data () {
      return {
        menu: CLOUD_MENU,
        activeitem: 3,
        person: JSON.parse(localStorage.person),
        pageNo: 1,
        pageSize: 50,
        lists: [],
        radioResion: 1,
        defaultLists: [],
        PAY_STATUS: PAY_STATUS,
        orderToCancel: JSON.parse(localStorage.orderToCancel),
        CANCEL_ORDER_RESIONS: CANCEL_ORDER_RESIONS,
        dialog: {
          show: false,
          fn: () => {
          },
          content: ''
        }
      }
    },
    methods: {
      rePay (list) {
        localStorage.list = JSON.stringify(list)
        this.$router.push('/cloud/pay?from=myappoint')
      },
      radioChange (val) {
        let _this = this
        this.lists = this.defaultLists.filter((v, i) => {
          if (_this.PAY_STATUS[0] === val) return true
          return _this.PAY_STATUS[v.payStatus] === val
        })
      },
      cancelOrder () {
        let self = this
        this.$store.commit('UPDATE_LOADING')
        commonAjax([
          PRODUCT_ID,
          this.orderToCancel.registrationId,
          CANCEL_ORDER_RESIONS[this.radioResion - 1],
          2
        ], `${PLATFORM_PREFIX}.registrationService`, 'cancelRegistration ').then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            this.dialog = {
              show: true,
              content: '取消挂号成功',
              fn: () => this.$router.replace('/cloud/appoint_history')
            }
          } else {
            this.dialog = {
              show: true,
              content: res.data.msg,
              fn: function () {
                self.dialog.show = false
              }
            }
          }
        }).catch(res => {
          this.$store.commit('UPDATE_LOADING')
          console.log(res)
        })
      }
    }
  }
</script>

<style lang="less">
  .background {
    .content {
      width: 1080px;
      margin: 0 auto;
      background-color: #ffffff;
      overflow: hidden;
    }
    .content .my_appointment {
      width: 1040px;
      margin: 0 auto;
      background-color: rgb(254, 251, 248);
      border: 1px solid rgb(245, 230, 227);
      position: relative;
      padding: 20px;
      margin-bottom: 20px;
    }

    .cancel-order {
      .middle {
        width: 48%;
      }
      .resions {
        width: 48%;
        padding: 20px;
      }
    }
    .cancel-order, .middle {
      overflow: hidden;
    }
    .cancel-order .middle li {
      padding: 10px 0 0;
      &.first {
        border-bottom: 1px solid rgb(245, 230, 227);
        padding-bottom: 20px;
      }
    }

    .cancel-order .bottom {
      margin-left: 20px;
      padding-bottom: 20px;
    }
    .cancel-order .bottom span:nth-of-type(1) {
      color: #999999;
    }

    .cancel-order .middle .name {
      display: inline-block;
      width: 300px;
    }
    .cancel-order .middle .left span:nth-of-type(1) {
      font-size: 14px;
      color: #999999;
    }
    .cancel-order .middle .right span:nth-of-type(1) {
      font-size: 14px;
      color: #999999;
    }
    .cancel-order .middle .right span:nth-of-type(2) {
      font-size: 14px;
      color: #993333;
    }
    .cancel-order .middle .right {
      width: 200px;
    }
    .cancel-order .middle .state span:nth-of-type(1) {
      color: #666666;
    }

    .border {
      width: 1040px;
      height: 1px;
      background-color: #cccccc;
      margin: 50px auto;
    }
    .content .warn {
      margin-left: 46px;
      margin-top: 30px;
      padding-bottom: 100px;
    }
    .content .warn li {
      font-size: 14px;
      color: #666666;
      margin-top: 10px;
      font-family: 'Microsoft YaHei';
    }
  }
</style>
